<!DOCTYPE html>
<html lang="en" style="font-size: 50px">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>视频导航</title>
    <style>
      #app {
        display: flex;
        flex-wrap: wrap;
      }
      a {
        width: 2rem;
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin: 0.2rem;
        text-decoration: none;
        color: #000;
        font-size: 0.28rem;
        cursor: pointer;
      }
      a:hover {
        background: #f06000;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script src="./config.js"></script>
    <script>
      const handleGo = async (path, name) => {
        const last = await http(`${host}/getPlayLast?name=${name}`)
        location.href =
          `./video.html?path=${encodeURIComponent(path)}&id=` + last.last
      }

      const init = async () => {
        const res = await http(`${host}/getDirData`)
        const video = res.videoDir

        const htmlStr = video
          .map(
            (item) =>
              `<a onclick="handleGo('${item}', '${item.split('/').slice(-1)[0]}')">${
                item.split('/').slice(-1)[0]
              }</a>`
          )
          .join('')
        const app = document.getElementById('app')
        app.innerHTML = htmlStr
      }

      const initSize = () => {
        const clientWidth = document.body.clientWidth
        document.documentElement.style.fontSize =
          (clientWidth / 375) * 50 + 'px'
      }
      initSize()
      window.addEventListener('resize', initSize)

      init()
    </script>
  </body>
</html>
